import QtQuick 1.1
import com.nokia.symbian 1.1
import PictureItem 1.0
import "SettingsStorage.js" as Settings

Page {
    id: root    
    tools: mainPageTools
    property string sheetColor: "white"
    property int imageSize: PictureItem.VGA
    property int imageMargin: 0
    property int imageStorage: PictureItem.StorageInternal
    property int imageAspectRatio: 1
    property alias menu: optionsMenu

    property string tileText: qsTr("Square 2 by 2")
    property string sidewaysText: qsTr("Side by side")
    property string upDownText: qsTr("Up to down")

    signal maxImages(int count)

    SettingsPageResolution{
        id: settingsResolutionPage
        onImageResolutionSize: {
            imageSize = size
            Settings.setSetting("imagesize",size)
        }
    }

    SettingsPageColor{
        id: settingsColorPage
        onBackgroundColor: {
            sheetColor = color
            Settings.setSetting("background",color);
        }
    }

    SettingsPageMargin{
        id: settingsMarginPage
        onImageMarginSize: {
            imageMargin = margin
            Settings.setSetting("margin",margin);
            picturePlugin.margin = margin
        }
    }

    SettingsPageStorage{
        id: settingsStoragePage
        onStorageChanged: {
            imageStorage = storage
            Settings.setSetting("storage",storage);
            picturePlugin.storage = storage
        }
    }

    SettingsPageAspect{
        id: settingsAspectPage
        onAspectRatio: {
            imageAspectRatio = ratio
            Settings.setSetting("aspectratio",ratio);
            picturePlugin.aspectRatio = ratio;
        }
    }

    TextDialog{
        id: aboutDialog
    }

    property list<QtObject> layoutModel:[
        LayoutChooserObject{ textSource: tileText
            imagesMax: 4
            imageType: PictureItem.Tile2by2
            icon: "qrc:/icons/all_icon.png"
        },

        LayoutChooserObject { textSource: sidewaysText
            imagesMax: 4
            imageType: PictureItem.Side
            icon: "qrc:/icons/side_icon.png"
        },

        LayoutChooserObject { textSource: upDownText
            imagesMax: 4
            imageType: PictureItem.UpDown
            icon: "qrc:/icons/down_icon.png"
        }
    ]

    Component{
        id: itemDelegate
        Rectangle{

            id: mainRect
            height: layoutChooser.height/4
            width: parent.width
            radius: 10            
            property int maxNumOfImages: imagesMax
            property int resultType: imageType
            state: "released"
            color: "transparent"

            Rectangle{
                id: itemRect
                anchors.fill: parent
                anchors.margins: parent.radius
                anchors.verticalCenter: parent.verticalCenter
                color: "lightgray"
                radius: parent.radius

                Row{
                    spacing: 10
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.verticalCenter: parent.verticalCenter

                    Image{
                        id: layoutImage
                        height: itemRect.height-itemRect.radius
                        width: itemRect.height-itemRect.radius
                        anchors.verticalCenter: parent.verticalCenter
                        source: icon
                    }
                    Text{
                        id: layoutText
                        text: textSource
                        font.bold: true
                        font.pixelSize: layoutImage.height/4
                        color: "black"
                        wrapMode: "WordWrap"
                        anchors.verticalCenter: parent.verticalCenter
                    }
                }
            }


            MouseArea{
                id: mainRectMouseArea
                anchors.fill: parent

                onClicked: {
                    animColor.running = true
                }
            }

            PropertyAnimation{
                id: animColor
                target: itemRect
                properties: "color"
                to: "steelblue"
                duration: 100

                onRunningChanged: {
                    if(!running){
                        root.maxImages(mainRect.maxNumOfImages)
                        pageStack.push(galleryPage,{resultType: mainRect.resultType,
                                           maxNumOfImages: mainRect.maxNumOfImages,
                                           sheetColor: root.sheetColor,
                                           imageMargin: root.imageMargin
                                       });
                        animColorBack.running = true
                    }
                }
            }

            PropertyAnimation{
                id: animColorBack
                target: itemRect
                properties: "color"
                to: "lightgray"
                duration: 100
            }
        }
    }

    Rectangle{
        anchors.fill: parent
        color: "transparent"

        Column{
            spacing: 7
            anchors.fill: parent

            Rectangle{
                id:formTextRect
                anchors{
                    left:parent.left
                    right:parent.right
                }
                radius: 10
                color: "steelblue"
                width: parent.width
                height: formText.height+5
                Text{
                    id: formText
                    text: qsTr("Group pictures in form of")
                    wrapMode: Text.WordWrap
                    anchors.horizontalCenter: parent.horizontalCenter
                    color: "white"
                }
            }

            ListView {
                id: layoutChooser                
                model: layoutModel
                delegate: itemDelegate
                height: parent.height-formTextRect.height-parent.spacing

                anchors{
                    left:parent.left
                    right:parent.right
                }

                focus: true
                onCurrentIndexChanged: if(layoutChooser.currentIndex>-1) layoutChooser.currentIndex=-1;
                clip: true
            }
        }
    }

    Menu {
        id: optionsMenu
        visualParent: mainPage
        MenuLayout {            
            MenuItem { text: qsTr("Image storage");
                onClicked: settingsStoragePage.open();
            }
            MenuItem { text: qsTr("Image size");
                onClicked: settingsResolutionPage.open();
            }
            MenuItem { text: qsTr("Background color");
                onClicked: settingsColorPage.open();
            }
            MenuItem { text: qsTr("Margins");
                onClicked: settingsMarginPage.open();
            }
            MenuItem { text: qsTr("Aspect ratio");
                onClicked: settingsAspectPage.open();
            }
            MenuItem { text: qsTr("About");
                onClicked: aboutDialog.open();
            }
        }
    }
}
